<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行业务管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            min-height: 100vh;
        }

        .top-bar {
            background-color: #1885ce;
            color: white;
            padding: 0 20px;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .system-name {
            font-size: 20px;
            font-weight: bold;
        }

        .user-actions {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .user-actions a {
            color: white;
            text-decoration: none;
            font-size: 14px;
        }

        .user-actions i {
            margin-right: 5px;
        }

        .main-container {
            display: flex;
            min-height: calc(100vh - 60px);
        }

        .sidebar {
            width: 220px;
            background-color: #1885ce;
            color: white;
            padding: 20px 0;
        }

        .nav-menu {
            list-style: none;
        }

        .nav-menu li {
            margin-bottom: 5px;
        }

        .nav-menu a {
            display: block;
            padding: 12px 20px;
            color: white;
            text-decoration: none;
            font-size: 15px;
            transition: all 0.3s;
        }

        .nav-menu a:hover, .nav-menu a.active {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .nav-menu i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

        .content-area {
            flex: 1;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .breadcrumb {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .info-section {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .basic-info {
            flex: 1;
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .basic-info h3 {
            font-size: 16px;
            margin-bottom: 15px;
            color: #333;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .info-row {
            display: flex;
            margin-bottom: 10px;
        }

        .info-label {
            width: 100px;
            color: #666;
            font-size: 14px;
        }

        .info-value {
            flex: 1;
            font-size: 14px;
            color: #333;
        }

        .view-btn {
            color: #1885ce;
            text-decoration: none;
            font-size: 14px;
            float: right;
        }

        .notifications {
            width: 300px;
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .notifications h3 {
            font-size: 16px;
            margin-bottom: 15px;
            color: #333;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .notification-item {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #eee;
        }

        .notification-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .notification-title {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }

        .notification-date {
            font-size: 12px;
            color: #999;
        }

        .quick-actions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }

        .action-card {
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
            cursor: pointer;
        }

        .action-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .action-icon {
            font-size: 24px;
            color: #1885ce;
            margin-bottom: 10px;
        }

        .action-title {
            font-size: 14px;
            color: #333;
        }

        .transaction-history {
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .transaction-history h3 {
            font-size: 16px;
            margin-bottom: 15px;
            color: #333;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        th {
            color: #666;
            font-weight: normal;
        }

        tr:hover {
            background-color: #f9f9f9;
        }

        .positive {
            color: #2ecc71;
        }

        .negative {
            color: #e74c3c;
        }

        .transfer {
            color: #1885ce;
        }

        .footer {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            font-size: 12px;
            color: #999;
            text-align: center;
        }

        .footer a {
            color: #d81e06;
            text-decoration: none;
        }

        .search-bar {
            display: flex;
            margin-bottom: 20px;
        }

        .search-input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            font-size: 14px;
        }

        .search-btn {
            background-color: #1885ce;
            color: white;
            border: none;
            padding: 0 15px;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        @media (max-width: 768px) {
            .info-section {
                flex-direction: column;
            }

            .notifications {
                width: 100%;
            }

            .quick-actions {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* 页面切换动画 */
        .page-transition {
            transition: opacity 0.3s ease-in-out;
        }
    </style>
</head>
<body class="page-transition">
    <div class="top-bar">
        <div class="system-name">银行业务管理系统</div>
        <div class="user-actions">
            <a href="#"><i class="fas fa-user-circle"></i> 管理员中心</a>
            <a href="#"><i class="fas fa-question-circle"></i> 帮助</a>
            <a href="#"><i class="fas fa-sign-out-alt"></i> 退出</a>
        </div>
    </div>

    <div class="main-container">
        <aside class="sidebar">
            <ul class="nav-menu">
                <li class="menu-item"><a href="#" class="active"><i class="fas fa-home"></i> 系统首页</a></li>
                <li class="menu-item"><a href="#"><i class="fas fa-plus-circle"></i> 开户</a></li>
                <li class="menu-item"><a href="a_customer_management.html"><i class="fas fa-hand-holding-usd"></i> 客户管理</a></li>
                <li class="menu-item" id="bankcard-menu"><a href="#"><i class="fas fa-money-bill-wave"></i> 银行卡管理</a></li>
                <li class="menu-item" id="deposit-menu"><a href="#"><i class="fas fa-exchange-alt"></i> 存款管理</a></li>
                <li class="menu-item"><a href="#"><i class="fas fa-chart-pie"></i> 交易管理</a></li>
                <li class="menu-item"><a href="#"><i class="fas fa-chart-pie"></i> 统计分析</a></li>
                <li class="menu-item"><a href="#"><i class="fas fa-search"></i> 查询</a></li>
                <li class="menu-item"><a href="#"><i class="fas fa-minus-circle"></i> 销户</a></li>
                <li class="menu-item"><a href="#"><i class="fas fa-minus-circle"></i> 设置</a></li>
            </ul>
        </aside>

        <main class="content-area">
            <div class="breadcrumb">
                当前位置: 系统首页
            </div>

            <div class="search-bar">
                <input type="text" class="search-input" placeholder="全局搜索...">
                <button class="search-btn"><i class="fas fa-search"></i></button>
            </div>

            <div class="info-section">
                <div class="basic-info">
                    <h3>支行信息 <a href="#" class="view-btn">查看详情</a></h3>
                    <div class="info-row">
                        <div class="info-label">支行名称</div>
                        <div class="info-value">**银行大连支行</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">支行编号</div>
                        <div class="info-value">dl-dlnu-zzz-001</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">支行地址</div>
                        <div class="info-value">金石滩国家旅游度假区金石路31号</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">客户数量</div>
                        <div class="info-value">1,245</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">账户数量</div>
                        <div class="info-value">2,378</div>
                    </div>
                </div>

                <div class="notifications">
                    <h3>系统公告 <a href="#" class="view-btn">查看全部</a></h3>
                    <div class="notification-item">
                        <div class="notification-title">关于新版网银系统上线的通知</div>
                        <div class="notification-date">2025-6-18</div>
                    </div>
                    <div class="notification-item">
                        <div class="notification-title">2025年第四季度业务培训安排</div>
                        <div class="notification-date">2025-6-18</div>
                    </div>
                    <div class="notification-item">
                        <div class="notification-title">关于年终结算工作的重要提醒</div>
                        <div class="notification-date">2025-6-18</div>
                    </div>
                </div>
            </div>

            <div class="quick-actions">
                <div class="action-card" onclick="window.location.href='a_customer_management.html'">
                    <div class="action-icon"><i class="fas fa-user-plus"></i></div>
                    <div class="action-title">新增客户</div>
                </div>
                <div class="action-card" onclick="window.location.href='a_customer_management.html'">
                    <div class="action-icon"><i class="fas fa-hand-holding-usd"></i></div>
                    <div class="action-title">存款业务</div>
                </div>
                <div class="action-card" onclick="window.location.href='a_customer_management.html'">
                    <div class="action-icon"><i class="fas fa-file-invoice-dollar"></i></div>
                    <div class="action-title">贷款业务</div>
                </div>
                <div class="action-card" onclick="window.location.href='transfer.html'">
                    <div class="action-icon"><i class="fas fa-exchange-alt"></i></div>
                    <div class="action-title">转账汇款</div>
                </div>
                <div class="action-card" onclick="window.location.href='open-account.html'">
                    <div class="action-icon"><i class="fas fa-credit-card"></i></div>
                    <div class="action-title">开立账户</div>
                </div>
                <div class="action-card" onclick="window.location.href='reports.html'">
                    <div class="action-icon"><i class="fas fa-file-export"></i></div>
                    <div class="action-title">业务报表</div>
                </div>
                <div class="action-card" onclick="window.location.href='analysis.html'">
                    <div class="action-icon"><i class="fas fa-chart-pie"></i></div>
                    <div class="action-title">业绩分析</div>
                </div>
                <div class="action-card" onclick="window.location.href='settings.html'">
                    <div class="action-icon"><i class="fas fa-cog"></i></div>
                    <div class="action-title">系统设置</div>
                </div>
            </div>

            <div class="transaction-history">
                <h3>最近交易记录 <a href="#" class="view-btn">查看全部</a></h3>
                <table>
                    <thead>
                        <tr>
                            <th>交易日期</th>
                            <th>交易类型</th>
                            <th>交易金额</th>
                            <th>关联账户</th>
                            <th>操作员</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2025-06-15 14:30</td>
                            <td class="positive">存款</td>
                            <td class="positive">+5,000.00</td>
                            <td>101035761234</td>
                            <td>高经理</td>
                        </tr>
                        <tr>
                            <td>2025-06-12 09:45</td>
                            <td class="negative">取款</td>
                            <td class="negative">-3,200.00</td>
                            <td>101035765678</td>
                            <td>李经理</td>
                        </tr>
                        <tr>
                            <td>2025-06-10 16:20</td>
                            <td class="transfer">转账</td>
                            <td class="negative">-1,500.00</td>
                            <td>101035769876</td>
                            <td>王经理</td>
                        </tr>
                        <tr>
                            <td>2025-06-06 11:15</td>
                            <td class="transfer">转账</td>
                            <td class="positive">+8,000.00</td>
                            <td>101035765432</td>
                            <td>赵经理</td>
                        </tr>
                        <tr>
                            <td>2025-06-01 10:00</td>
                            <td class="positive">存款</td>
                            <td class="positive">+12,000.00</td>
                            <td>101035760123</td>
                            <td>张经理</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="footer">
                <p>咨询电话：123456 | 工作时间：工作日9:00-12:00,14:00-17:00</p>
                <p>如有技术问题，请发送邮件至：<a href="mailto:banking-support@example.com">banking-support@example.com</a></p>
                <p>© 2025 **银行 </p>
            </div>
        </main>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 导航菜单效果
            const navItems = document.querySelectorAll('.nav-menu > li > a');
            navItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 更新活动状态
                    document.querySelectorAll('.nav-menu a').forEach(a => a.classList.remove('active'));
                    this.classList.add('active');

                    // 银行卡管理菜单点击事件
                    if (this.parentElement.id === 'bankcard-menu') {
                        window.location.href = 'Bankcard_management.html';
                    }
                    // 存款管理菜单点击事件
                    else if (this.parentElement.id === 'deposit-menu') {
                        window.location.href = 'business_management.html';
                    }
                    // 其他菜单可以在此添加跳转逻辑
                });
            });

            // 快捷操作卡片效果
            const actionCards = document.querySelectorAll('.action-card');
            actionCards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-3px)';
                    this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.1)';
                });

                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                    this.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.05)';
                });
            });

            // 搜索功能
            const searchBtn = document.querySelector('.search-btn');
            searchBtn.addEventListener('click', function() {
                const searchText = document.querySelector('.search-input').value;
                if (searchText) {
                    // 这里可以添加实际的搜索逻辑或跳转到搜索结果页面
                    alert('正在搜索: ' + searchText);
                } else {
                    alert('请输入搜索内容');
                }
            });

            // 回车键搜索
            document.querySelector('.search-input').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    searchBtn.click();
                }
            });

            // 页面切换动画
            document.addEventListener('visibilitychange', function() {
                if (document.hidden) {
                    document.body.style.opacity = '0';
                } else {
                    document.body.style.opacity = '1';
                }
            });

            // 从localStorage获取用户信息并显示
            const userData = localStorage.getItem('bankingUser');
            if (userData) {
                const user = JSON.parse(userData);
                // 更新系统名称，显示用户名
                const systemName = document.querySelector('.system-name');
                if (systemName) {
                    systemName.textContent = `银行业务管理系统 - ${user.name}`;
                }

                // 在用户操作栏添加用户信息
                const userActions = document.querySelector('.user-actions');
                if (userActions) {
                    const userProfile = document.createElement('a');
                    userProfile.href = '#';
                    userProfile.innerHTML = `<i class="fas fa-user-circle"></i> ${user.name}`;
                    userActions.insertBefore(userProfile, userActions.firstChild);
                }
            } else {
                // 如果没有用户信息，说明未登录，跳转到登录页面
                setTimeout(() => {
                    alert('请先登录系统');
                    window.location.href = 'login.html';
                }, 3000);
            }
        });
    </script>
</body>
</html>